<!--
 * Tencent is pleased to support the open source community by making BK-JOB生物智算平台 available.
 *
 * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
 *
 * BK-JOB生物智算平台 is licensed under the MIT License.
 *
 * License for BK-JOB生物智算平台:
 *
 *
 * Terms of the MIT License:
 * ---------------------------------------------------
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
 * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
 * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
 * the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
 * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
 * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
-->

<script>
  const statusMap = {
    1: 'waiting',
    2: 'uploading',
    3: 'downloading',
    4: 'finished',
    5: 'failed',
  };

  export default {
    functional: true,
    render(h, context) {
      const { props, listeners, parent } = context;
      const {
        data,
        openMemo,
        renderContentMap,
        isContentLoading,
      } = props;
      const isContentOpen = Boolean(openMemo[data.taskId]);

      const classes = {
        'step-detail-file-log-block': true,
        [statusMap[data.status]]: true,
        toggle: isContentOpen,
      };
      // 异步获取日志的loading状态
      const logContent = renderContentMap[data.taskId] || data.logContent;
      if (isContentLoading && !logContent) {
        classes['content-loading'] = true;
      }
      const renderProgress = () => {
        const wholeProgress = '*******************************************************************************************';
        const process = parseInt(data.progress, 10) / 100;
        return wholeProgress.slice(0, Math.floor(process * wholeProgress.length) || 1);
      };
      const handleToggle = () => {
        listeners['on-toggle'](data.taskId, !isContentOpen);
      };
      return (
            <div class={classes}>
                <div class="log-header" onClick={handleToggle}>
                    <i class="job-icon job-icon-down-small log-toggle" />
                    <span>{ parent.$t('history.文件名') }：{ data.fileName }</span>
                    <span>{ parent.$t('history.文件大小') }：{ data.fileSize }</span>
                    <span>{ parent.$t('history.状态.log') }：<span class="status">{ data.statusDesc }</span></span>
                    <span>{ parent.$t('history.源服务器 IP') }：{ data.srcIp || data.srcIpv6 }</span>
                    <span>{ parent.$t('history.速率') }：{ data.speed }</span>
                    <span>{ parent.$t('history.进度') }：{ data.progress }</span>
                </div>
                {
                    isContentOpen && (
                        <div class="log-body">
                            <div class="log-content">{ logContent }</div>
                            <div class="log-process">{ renderProgress() }</div>
                        </div>
                    )
                }
            </div>
      );
    },
  };
</script>
<style lang='postcss'>
  @keyframes file-loading-ani {
    0% {
      content: "*";
    }

    30% {
      content: "**";
    }

    60% {
      content: "***";
    }
  }

  .step-detail-file-log-block {
    padding-left: 48px;
    margin-top: 10px;
    font-size: 13px;
    line-height: 18px;
    color: #dcdee5;

    &.toggle {
      .log-body {
        display: block;
      }

      .log-toggle {
        transform: rotateZ(0);
      }
    }

    &.waiting,
    &.uploading,
    &.downloading &.content-loading {
      .log-process {
        &::after {
          display: inline-block;
          content: "*";
          animation: file-loading-ani 2s linear infinite;
        }
      }
    }

    &.waiting {
      .status {
        color: #dcdee5;
      }
    }

    &.uploading,
    &.downloading {
      .status {
        color: var(--color-primary);
      }
    }

    &.failed {
      .status {
        color: #ea3636;
      }
    }

    &.finished {
      .status {
        color: #3fc06d;
      }
    }

    .log-header {
      position: relative;
      line-height: 24px;
      white-space: nowrap;
      cursor: pointer;

      & > * {
        margin-right: 40px;
      }
    }

    .log-toggle {
      position: absolute;
      top: 0;
      left: -34px;
      font-size: 24px;
      transform: rotateZ(-90deg);
      transition: transform 0.15s;
    }

    .log-body {
      display: none;
    }

    .log-content {
      margin-top: 2px;
      line-height: 22px;
      color: #979ba5;
      white-space: pre;
    }
  }
</style>
